<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <!-- Custom styles for this template -->
    <link href="../../static/css/dashboard.css" rel="stylesheet" th:href="@{/static/css/dashboard.css}">
    <script src="../../static/js/jquery-3.6.0.js" th:src="@{/static/js/jquery-3.6.0.js}"
            type="text/javascript"></script>
    <!--导入MD5加密-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<div th:insert="student/common::topbar"></div>
<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <div th:insert="~{student/common::sidebar(active='updateUserInfo.html')}">
        </div>
        <main class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4" role="main">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                <h1 class="h3">修改账号</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group mr-2">
                        <button class="btn btn-sm btn-outline-secondary" id="btn-quit">取消修改</button>
                        <button class="btn btn-primary btn-sm btn-outline-secondary" id="btn-admin">管理员</button>
                        <button class="btn btn-sm btn-outline-secondary" id="btn-student">重新登陆</button>
                    </div>
                </div>
            </div>
            <form id="myform" method="post" onsubmit="return check()" th:action="@{/student/updateUserInfo}">
                <p style="color: red" th:if="${not #strings.isEmpty(msg)}" th:text="${msg}"></p>
                <div class="form-group form-inline">
                    <input hidden id="hiddenId" th:value="${user.getUserid()}" type="text">
                    <label class="form-check-inline" for="old_id">旧账号:</label>
                    <input class="form-control" id="old_id" name="old_id" placeholder="请输入原来的账号名" type="text">
                    <img alt="账号无误!" id="checkId" src="../../static/img/success.png"
                         style="width:30px;height: 30px;display: none" th:src="@{/static/img/success.png}">
                </div>
                <div class="form-group form-inline">
                    <label class="form-check-inline" for="new_id">新账号</label>
                    <input class="form-control" id="new_id" name="new_id" placeholder="请输入新的的账号名" type="text">
                    <img alt="账号无误!" id="checkNewId" src="../../static/img/success.png"
                         style="width:30px;height: 30px;display: none" th:src="@{/static/img/success.png}">
                </div>
                <div class="form-group form-inline">
                    <label class="form-check-inline" for="old_pwd">旧密码</label>
                    <input class="form-control" id="old_pwd" name="old_pwd" placeholder="请输入原来的密码" type="password">
                    <input hidden id="old_md5_pwd">
                    <img alt="密码无误!" id="checkPwd" src="../../static/img/success.png"
                         style="width:30px;height: 30px;display: none" th:src="@{/static/img/success.png}">

                </div>
                <!--想了一下,觉得这里的加密完全没用-->
                <div class="form-group form-inline">
                    <label class="form-check-inline" for="new_pwd">新密码</label>
                    <input class="form-control" id="new_pwd" name="new_pwd" placeholder="密码至少8位，要求必须字母、数字加英文符号（不包含空格）"
                           type="password">
                    <input hidden id="new_md5_pwd">
                    <img alt="密码无误!" id="checkNewPwd" src="../../static/img/success.png"
                         style="width:30px;height: 30px;display: none" th:src="@{/static/img/success.png}">
                </div>
                <button class="btn btn-success " id="btn">修改</button>
            </form>
        </main>
    </div>
</div>
<script src="../../static/js/popper.min.js" th:src="@{/static/js/popper.min.js}" type="text/javascript"></script>
<script src="../../static/js/bootstrap.min.js" th:src="@{/static/js/bootstrap.min.js}" type="text/javascript"></script>
<!-- Icons -->
<script src="../../static/js/feather.min.js" th:src="@{/static/js/feather.min.js}" type="text/javascript"></script>
<!-- Graphs -->
<script src="../../static/js/Chart.min.js" th:src="@{/static/js/Chart.min.js}" type="text/javascript"></script>
<script>
    'use strict'
    let oldId = $('#old_id');
    let newId = $('#new_id');
    let oldPwd = $('#old_pwd');
    let newPwd = $('#new_pwd');
    let oldMd5Pwd = $('#old_md5_pwd');
    let newMd5Pwd = $('#new_md5_pwd');

    newId.mouseout(function () {
        if (oldId.val() === newId.val() && oldId.val() != null && oldId.val() !== "") {
            //msgId.attr('value',"新的账号不能与原有的账号名一致!");
            alert("新的账号不能与原有的账号名一致!");
            newId.val("");
        } else if (newId.val() != null && newId.val() !== oldId.val() && newId.val() !== "") {
            let userid = newId.val();
            $.get({
                url: "/student/judge",
                data: {"userid": userid},
                success: function (result) {
                    if (result === false) {
                        $('#checkNewId').show();
                    } else {
                        alert("该账号已被注册!请换一个!");
                        $('#checkNewId').hide();
                        newId.val("");

                    }
                }
            })
        } else if (newId.val() === null || newId.val() === "") {
            $('#checkNewId').hide();
        }
    })
    newPwd.mouseout(function () {
        if (oldPwd.val() === newPwd.val() && oldPwd.val() != null && oldPwd.val() !== "") {
            alert("新的密码不能与原有的密码名一致!");
            newPwd.val("");
            $('#checkNewPwd').hide();
            //msgPwd.show();
        } else if (newPwd.val() !== null && newPwd.val() !== oldPwd.val() && newPwd.val() !== "") {
            if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/.test(newPwd.val())) {
                alert("密码至少8位，要求必须字母、数字加英文符号（不包含空格）");
                newPwd.val("");
                $('#checkNewPwd').hide();
            } else {
                $('#checkNewPwd').show();
            }

        } else if (newPwd.val() === null || newPwd.val() === "") {
            $('#checkNewPwd').hide();
        }
    })
    oldId.mouseout(function () {
        let userid = oldId.val();
        if (oldId.val() !== null && oldId.val() !== "") {
            let user = $('#hiddenId').val();
            if (oldId.val() === user) {
                $('#checkId').show();
            } else {
                alert("账号不匹配");
                oldId.val("");
                $('#checkId').hide();
                /*oldId.attr("placeholder","账号不匹配");*/
            }
            /* $.ajax({
                 url:"/student/judge/userid/{userid}",
                 type:"get",
                 success:function (result){
                     if(result===true){
                         $('#checkId').show();
                     }
                 }
             })*/
        } else {
            $('#checkId').hide();
        }
    })
    oldPwd.mouseout(function () {
        let pwd = oldPwd.val();
        let userid = oldId.val();
        let checkPwd = $('#checkPwd');
        if (pwd !== null && pwd !== "") {
            $.get({
                url: "/student/judge/pwd",
                data: {"userid": userid, "pwd": pwd},
                success: function (result) {
                    if (result === true) {
                        checkPwd.show();
                    } else {
                        alert("密码错误");
                        checkPwd.val("");
                        checkPwd.hide();
                        /*   checkPwd.attr("placeholder","密码错误");*/
                    }
                }
            })
        } else {
            checkPwd.hide();
        }
    })


    function check() {
        if (oldPwd.val() !== null && newPwd.val() !== null && newPwd.val() !== "" && oldPwd.val() !== "") {
            oldMd5Pwd.val(md5(oldPwd.val()));
            newMd5Pwd.val(md5(newPwd.val()));
            /* oldPwd.val(md5(oldPwd.val()));
             newPwd.val(md5(newPwd.val()));*/
        } else {
            alert("请输入密码");
        }
        return true;
    }

    $('#btn-quit').click(function () {
        let result = confirm("是否退出编辑?");
        if (result === true) {
            $(location).attr('href', '/homePage.html');
        } else {

        }
    })

    $('#btn-admin').click(function () {
        let result = confirm("是否进入管理员登录?");
        if (result === true) {
            $(location).attr('href', '/adminLogin.html');
        } else {

        }

    })
    $('#btn-student').click(function () {
        let result = confirm("是否重新登录?");
        if (result === true) {
            $(location).attr('href', '/studentLogin.html');
        } else {

        }

    })

    $(function () {
        $('#btn').click(function () {
            let result = confirm("是否提交数据?");
            if (result === true) {
                $('#myform').submit(function () {
                    alert("修改成功!");
                })
            }
        })
    })
</script>
</body>
</html>